<template>
    <div @scroll="() => {

    }" style="overflow-y: auto;padding-bottom: 16px;background-color: white;">
        <div
            style="width: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;gap: 8px;padding: 0 20px;">
            <div v-if="!data.list || !data.list.length"
                style="width: 100%;text-align: center;font-size: 14px;color: gray;margin-top: 32px;">
                没有设置项
            </div>
            <div v-if="data.list && data.list.length"
                style="width: 100%;max-width: 900px;margin: 0 auto;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;gap: 16px;padding-top: 16px;">
                <div v-for="(item, index) in data.list" style="width: 100%;">
                    <div style="width: 100%;padding-left: 16px;font-size: 16px;padding-bottom: 8px;">
                        {{ item.title }}
                    </div>
                    <div
                        style="width: 100%;border-radius: 8px;border: 1px solid rgb(230,230,230);display: flex;flex-direction: column;background-color: white;box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
                        <div @click="() => {
                            if (subItem.rightType === 'switch') {
                                try {
                                    subItem.callBack(!subItem.rightValue)
                                } catch (error) {

                                }
                                clearShowedMenus()
                                return
                            }
                            if (Array.isArray(subItem.rightType)) {
                                clearShowedMenus()
                                showMenu(index, index2)
                                return
                            }
                            try {
                                subItem.callBack()
                                clearShowedMenus()
                            } catch (error) {

                            }
                        }" v-for="(subItem, index2) in item.list" :class="`button${(() => {
                            if (Array.isArray(subItem.rightType)) {
                                if (canShow(index, index2)) {
                                    return '-disabled'
                                }
                                return ''
                            }
                            return ''
                        })()}`" :style="{
                            borderTop: index2 ? '1px solid rgb(250,250,250)' : ''
                        }">
                            <div
                                style="width: 100%;height: 100%;display: flex;justify-content: flex-start;align-items: center;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">
                                {{ subItem.text }}
                            </div>
                            <div
                                style="width: 100%;height: 100%;display: flex;justify-content: flex-end;align-items: center;">
                                <span
                                    style="color: gray;font-size: 14px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;"
                                    v-if="subItem.rightType === 'text'">{{ subItem.rightValue }}</span>
                                <span
                                    style="color: gray;font-size: 14px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;"
                                    v-else-if="subItem.rightType === 'switch'">
                                    <svg v-if="!subItem.rightValue" xmlns="http://www.w3.org/2000/svg" height="32px"
                                        viewBox="0 -960 960 960" width="32px" fill="#333">
                                        <path
                                            d="M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm0-80h400q66 0 113-47t47-113q0-66-47-113t-113-47H280q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-40q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm200-120Z" />
                                    </svg>
                                    <svg v-if="subItem.rightValue" xmlns="http://www.w3.org/2000/svg" height="32px"
                                        viewBox="0 -960 960 960" width="32px" fill="rgb(0,120,215)">
                                        <path
                                            d="M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm400-120q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z" />
                                    </svg>
                                </span>
                                <span
                                    style="color: gray;font-size: 14px;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;position: relative;"
                                    v-else-if="Array.isArray(subItem.rightType)">{{(() => {
                                        for (let i = 0; i < subItem.rightType.length; i++) {
                                            if
                                                (subItem.rightType[i].value === subItem.rightValue) return
                                            subItem.rightType[i].key;
                                        }; return subItem.rightValue
                                    })()}} <div
                                        v-if="canShow(index, index2)"
                                        style="position: absolute;right: -8px;top: 20px;display: inline-block;width: max-content;border-radius: 5px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);background-color: white;z-index: 100;border: 1px solid rgb(230,230,230);color: black;">
                                        <div @click="async ()=>{
                                            await tool.wait(0.01)
                                            clearShowedMenus()
                                        }"
                                            style="width: 20px;height: 20px;display: inline-block;border-radius: 50%;background-color: red;color: white;position: absolute;top: -5px;right: -5px;">
                                            <div
                                                style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                                                <svg xmlns="http://www.w3.org/2000/svg" height="16px"
                                                    viewBox="0 -960 960 960" width="16px" fill="currentColor">
                                                    <path
                                                        d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
                                                </svg>
                                            </div>
                                        </div>
                                        <div @click="async () => {
                                            subItem.callBack(subItem3.value)
                                            await tool.wait(0.01)
                                            clearShowedMenus()
                                        }" class="button" v-for="(subItem3, index3) in subItem.rightType"
                                            style="width: 100%;">
                                            {{ subItem3.key }}
                                        </div>
                            </div>
                            </span>
                            <span v-else>
                                <svg style="transform: translateX(10px);" xmlns="http://www.w3.org/2000/svg"
                                    height="30px" viewBox="0 -960 960 960" width="30px" fill="#333">
                                    <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../modules/tool'

const props = defineProps({
    data: {
        type: Object,
        default: {}
    }
})

watch(() => props.data, () => {
    clearShowedMenus()
}, {
    deep: true
})

const showMenuIndexes = ref({

})

const clearShowedMenus = () => {
    showMenuIndexes.value = {}
}

const showMenu = (index1, index2) => {
    if (showMenuIndexes.value[index1] === undefined) showMenuIndexes.value[index1] = {}
    if (showMenuIndexes.value[index1][index2] === undefined) showMenuIndexes.value[index1][index2] = true
}

const hideMenu = (index1, index2) => {
    try {
        delete showMenuIndexes.value[index1][index2]
    } catch (error) {

    }
}

const canShow = (index1, index2) => {
    try {
        return showMenuIndexes.value[index1][index2]
    } catch (error) {
        return false
    }
}

onMounted(async () => {

})

</script>

<style scoped>
.button-disabled {
    padding: 0px 16px;
    font-size: 16px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    display: flex;
    border-radius: 5px;
}

.button {
    padding: 0px 16px;
    font-size: 16px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    display: flex;
    border-radius: 5px;
}

.button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.button:active {
    background-color: rgba(0, 0, 0, 0.05);
}
</style>